<script>
import { getIdleSpace, getPresents } from "@/api/modules/home";
import customUser from "@/components/customUser/customUser";
import { Toast } from "vant";

export default {
  components: {
    customUser,
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfoGetter;
    },
    newMessageList() {
      return this.$store.getters.newMessageListGetter;
    },

    newMessageOutObj() {
      return this.$store.getters.newMessageOutObjGetter;
    },
  },
  data() {
    return {
      cardList: ["小", "中", "大", "新", "特"],
      carNumObj: {
        totalSpaceNum: 0,
        idleSpaceNum: 0,
      },
      carList: [],
      showUser: false,
      contentRow: {},
      showCar: false,
      timer: null,
    };
  },
  async mounted() {
    const toast = Toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: "加载中",
    });
    await this.getInitFn();
    toast.clear();

    window.setPlateNumber = this.setPlateNumber;
    window.goManually = this.goManually;
    window.setPlateBase64 = this.setPlateBase64;
    window.goInCarRule = this.goInCarRule;
  },
  destroyed() {},
  watch: {
    showCar() {
      this.showCar && this.getInitFn();
    },
    newMessageOutObj: {
      handler() {
        this.getInitFn();
      },
      deep: true,
    },
    newMessageList: {
      handler() {
        this.getInitFn();
      },
      deep: true,
    },
  },
  methods: {
    setPlateBase64(url) {
      this.$store.commit("setPlateImg", url);
    },
    goInCarRule(carNo) {
      this.$router.push({
        path: "/searchCar",
        query: {
          carNo: carNo,
        },
      });
    },
    setPlateNumber(carNo) {
      this.$router.push({
        path: "/carForm",
        query: {
          carNo: carNo,
          parkspaceCode: this.contentRow.parkspaceCode,
          roadCode: this.contentRow.roadCode,
        },
      });
    },
    goManually() {
      this.$router.push({
        path: "/entryCar",
        query: {
          carNo: "",
          parkspaceCode: this.contentRow.parkspaceCode,
          roadCode: this.contentRow.roadCode,
        },
      });
    },
    routerPush() {
      this.$router.push("/carParking");
    },
    goCar(row, type) {
      if (type) {
        this.$router.push({
          path: "/carDetails",
          query: {
            parkspaceCode: row.parkspaceCode,
            roadCode: row.roadCode,
            workstationId: this.userInfo.workstationId,
            parkingRecordId: row.parkingRecordId,
            carNo: row.carNo,
          },
        });
        return;
      }

      if (row.carStatus) {
        this.$router.push({
          path: "/carDetails",
          query: {
            parkspaceCode: row.parkspaceCode,
            roadCode: row.roadCode,
            workstationId: row.workstationId,
            parkingRecordId: row.parkingRecordId,
            carNo: row.carNo,
          },
        });
      } else {
        this.contentRow = row;
        this.scanCode();
      }
    },
    sancanFn() {
      try {
        this.$store.commit("setPlateImg", "");
        // eslint-disable-next-line no-undef
        window.android.goQueryCarCard();
      } catch (e) {
        this.goInCarRule();
      }
    },
    scanCode() {
      this.$store.commit("setPlateImg", "");
      // eslint-disable-next-line no-undef
      window.android.goCameraScanActivity();
    },

    async getInitFn() {
      const data = await getIdleSpace({
        workstationId: this.userInfo.workstationId,
        tollmanId: this.userInfo.id,
      });

      const haveData = await getPresents({
        workstationId: this.userInfo.workstationId,
        tollmanId: this.userInfo.id,
      });
      this.carList = [];
      if (data.code === 200 && haveData.code === 200) {
        this.carNumObj.idleSpaceNum = haveData.data.idleSpaceNum;
        this.carNumObj.totalSpaceNum = haveData.data.totalSpaceNum;
        data.data.forEach((item) => {
          item.parkspaceList.forEach((it) => {
            this.carList.push({
              parkspaceCode: it,
              carStatus: 0,
              roadCode: item.roadCode,
              workstationId: haveData.data.workstationId,
            });
          });
        });

        haveData.data.roadPresentCars.forEach((item) => {
          item.presentCars.forEach((it) => {
            this.carList.push({
              ...it,
              carStatus: 1,
              roadCode: item.roadCode,
              workstationId: haveData.data.workstationId,
            });
          });
        });

        this.carList = this.carList.sort((a, b) => {
          const aNum = a.parkspaceCode.replace(/[^\d]/g, " ");
          const bNum = b.parkspaceCode.replace(/[^\d]/g, " ");
          return parseInt(aNum) - parseInt(bNum);
        });
      }
    },
  },
};
</script>
<template>
  <div class="home">
    <div class="home-tab">
      <van-nav-bar title="车位管理">
        <template #left>
          <i @click="showUser = true" class="tc ting-gengduo"></i>
        </template>
        <template #right>
          <!--          <i-->
          <!--            @click="sancanFn"-->
          <!--            class="tc ting-saomiao"-->
          <!--            style="margin-right: 20px"-->
          <!--          ></i>-->
          <i @click="$router.push('/searchCar')" class="tc ting-sousuo"></i>
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <div class="home-num">
        <div class="home-num-item">
          <div class="title">总车位</div>
          <div class="num">{{ carNumObj.totalSpaceNum || 0 }}个</div>
        </div>
        <div class="home-num-item" @click="showCar = !showCar">
          <div class="title">
            空车位
            <i
              style="color: var(--theme-color)"
              v-if="!showCar"
              class="tc ting-xin"
            ></i>
          </div>
          <div class="num">{{ carNumObj.idleSpaceNum || 0 }}个</div>
        </div>
      </div>
      <div class="home-content" v-if="showCar">
        <div
          class="home-content-items"
          @click="goCar(item)"
          v-for="(item, index) in carList"
          :key="index"
        >
          <div class="home-content-items-title">
            <div>{{ item.parkspaceCode }}</div>

            <div class="card" v-if="item.fixFlag">卡</div>
          </div>
          <div v-if="item.carStatus" style="height: 70px">
            <div class="home-content-items-car">
              <div class="car">{{ item.carNo || "无牌车" }}</div>
              <div class="card">{{ cardList[item.carType] }}</div>
            </div>
            <div class="home-content-items-time">
              {{ item.parkTime | parkTimeFilter }}
            </div>
          </div>
          <div
            v-else
            style="height: 70px; text-align: center; line-height: 70px"
          >
            空车位
          </div>
        </div>
      </div>

      <div class="home-content" v-else>
        <div class="home-content-head-title">最新入车</div>
        <div
          class="home-content-items"
          @click="goCar(item, 'message')"
          v-for="(item, index) in newMessageList"
          :key="index"
        >
          <div class="home-content-items-title">
            <div>{{ item.parkspaceCode }}</div>
            <div class="card" v-if="item.source == 1">地磁</div>
            <div class="card" v-if="item.source == 2">相机</div>
            <div class="card" v-if="item.source == 3">web端</div>
            <div class="card" v-if="item.fixFlag">卡</div>
          </div>
          <div style="height: 70px">
            <div class="home-content-items-car">
              <div class="car">{{ item.carNo || "无牌车" }}</div>
              <div class="card">{{ cardList[item.carType] }}</div>
            </div>
            <div class="home-content-items-time">
              {{ item.inTime }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-btn" style="bottom: 100px">
      <van-button @click="sancanFn" size="large" round type="primary"
        >出车
      </van-button>
    </div>
    <div class="home-btn">
      <van-button @click="routerPush" size="large" round type="primary"
        >入车
      </van-button>
    </div>
    <customUser :showUser.sync="showUser"></customUser>
  </div>
</template>

<style scoped lang="scss">
.home {
  width: 100%;
  padding-bottom: 200px;

  .home-tab {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;

    i {
      font-size: 20px;
    }
  }

  .content {
    width: 100%;
    padding-top: 60px;

    .home-num {
      width: calc(100% - 24px);
      margin: 0 auto;
      box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 8px;
      padding: 10px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .home-num-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: bold;

        .num {
          font-size: 24px;
          color: var(--theme-color);
        }
      }
    }

    .home-content {
      //background: #606266;
      padding: 12px;
      padding-bottom: 100px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .home-content-head-title {
        width: 100%;
        height: 18px;
        font-weight: bold;
      }

      .home-content-items {
        width: 46%;
        background: white;
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
        padding: 10px;
        box-sizing: border-box;

        .home-content-items-title {
          font-size: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .card {
            font-size: 14px;
            color: red;
            background: #f3f4f5;
            padding: 1px 4px;
            border-radius: 4px;
          }
        }

        .home-content-items-car {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .car {
            font-weight: bold;
            font-size: 18px;
          }

          .card {
            background: #f3f4f5;
            padding: 1px 4px;
            border-radius: 4px;
            color: var(--theme-color);
          }
        }
      }
    }
  }

  .home-btn {
    position: fixed;
    width: 100%;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .van-button {
      width: 90%;
      font-weight: bold;
    }
  }
}
</style>
